.introduction-container {
  margin-bottom: 7rem;

  &.active {
      margin-top: $global-nav-height;
  }
}

.introduction-item {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2em;

  &:last-child {
    margin-bottom: 0;
  }

  @include media($medium-screen-up) {
    @include fill-parent;
    @include clearfix;
    display: block;
    margin-bottom: 2em;
  }

  code {
    color: $dark-gray;
    font-size: .95rem;
    padding: 0 .4em;
  }
}

.introduction-item-graphic-wrapper,
.introduction-item-text-wrapper {
  padding: 0;

  @include media($medium-screen-up) {
    @include span-columns(6 of 12);
    @include omega(2n);
    padding: 2em;
  }
  &.-left {
    @include media($medium-screen-up) {
      padding-left: 0;
    }
  }
  &.-right {
    @include media($medium-screen-up) {
      padding-right: 0;
    }
  }
}

.introduction-item-graphic-wrapper {
  order: 1;
  margin: 0 auto;
  width: 100%;

  @include media($medium-screen-up) {
    @include span-columns(6 of 12);
  }
}

.intro-graphic {
  &-one {
    background: image_url("languages.svg");
    background-size: 130px;
    background-repeat: no-repeat;
    background-position: 50%;
    height: 12em;
    margin: 0 auto;

    @include media($medium-screen-up) {
      background-size: 239px;
      height: 17em;
    }
  }

  &-two {
    background: image_url("speed.svg");
    background-size: 163px;
    background-repeat: no-repeat;
    background-position: 50%;
    height: 12em;
    margin: 0 auto;

    @include media($medium-screen-up) {
      background-size: 256px;
      height: 18em;
    }
  }

  &-three {
    background: image_url("fork.svg");
    background-size: 183px;
    background-repeat: no-repeat;
    background-position: 50%;
    height: 12em;
    margin: 0 auto;

    @include media($medium-screen-up) {
      background-size: 256px;
      height: 16em;
    }
  }
}

.introduction-item-text-wrapper {
  order: 2;
  margin-top: 0;
  text-align: center;

  @include media($medium-screen-up) {
    text-align: left;
    margin-top: 4em;
  }
}

.introduction-item-header {
  font-size: 2rem;
  margin-top: 0;
  color: $dark-gray;
}

.introduction-item-text {
  font-size: $base-font-size;
}

